<template>
	<view>
		<view class="header">
			<view class="title">
				<image src="../../static/image/logo1.png" mode=""></image>
				<view class="input1">
					<u--input @blur='checkphone' v-model="phone" placeholder="请输入手机号"></u--input>
				</view>
				<view class="input2">
					<u--input @blur='checkcode' v-model="code" placeholder="请输入验证码"></u--input>
				</view>
				<view class="button1">
					<u-button type="primary" @click="getCode">{{msg}}</u-button>
				</view>

				<view class="button2">
					<u-button @click="login">登录</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入封装好的接口
	import {
		SendSMS,
		smsLogin
	} from '@/reuqust/api.js'
	export default {
		data() {
			return {
				phone: '', //手机号
				code: '', //验证码
				sendCode: '', //后台返回的验证码
				msg: '获取验证码',
				num: 15,
				isshow: true //判断按钮状态
			}
		},
		methods: {
			//失去焦点判断 =>手机号
			checkphone() {
				let reg = /^1\d{10}$/
				if (!reg.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机格式',
						icon: "none",
						duration: 3000
					})
					return false
				} else {
					return true
				}
			},
			//失去焦点判断 =>验证码
			checkcode() {
				//判断空
				//判断用户输入的验证和获取的验证码是否一致
				if (!this.code || this.code != this.sendCode) {
					uni.showToast({
						title: '请先获取验证码',
						icon: "none"
					})
					return
				}

			},
			//获取验证码
			async getCode() {
				if (!this.isshow) return
				let a = await this.checkphone()
				//a 就是检测手机号返回的结果
				if (a) {
					//判断存储
					if (uni.getStorageSync('code')) {
						console.log(1111);
						this.sendCode = uni.getStorageSync('code')
						this.isshow = false
						let timer = setInterval(() => {
							this.num--
							this.msg = `${this.num}s后，可以重新获取`
							if (this.num < 1) {
								clearInterval(timer)
								this.msg = '收获验证码'
								this.isshow = true
								this.num = 15
							}
						}, 1000)
					} else {
						console.log(222);
						SendSMS({
								phone: this.phone
							})
							.then(res => {
								if (res.data.code == '200') {
									// 把验证码结果存储到本地
									uni.setStorageSync('code', res.data.list.code)
									this.isshow = false
									let timer = setInterval(() => {
										this.num--
										this.msg = `${this.num}s后，可以重新获取`
										if (this.num < 1) {
											clearInterval(timer)
											this.msg = '收获验证码'
											this.isshow = true
											this.num = 15
										}
									}, 1000)
								}
							})
					}
				}
			},
			// 登录
			login() {
				if (!this.phone || !this.code) {
					uni.showToast({
						title: '请输入手机号与验证码',
						icon: 'none'
					})
					return
				}
				console.log(this.code, '用户输入', this.sendCode, '自动获取');
				if (this.code == this.sendCode) {
					// 调取登录接口
					smsLogin({
							phone: this.phone
						})
						.then(res => {
							console.log(res, '手机号登录响应');
							//登录成功，被返回的res.data.list 存储，然后跳转首页
							if (res.data.code == 200)
								uni.setStorageSync('userinfo', res.data.list)
							// 跳转到首页
							uni.switchTab({
								url: '../mine/mine'
							})
						})
				} else {
					uni.showToast({
						title: '请输入正确验证码',
						icon: "none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	// .header{
	// 	    height: 100%;
	// 	    background: #f2f2f2;
	// 	    display: flex;
	// 	    justify-content: center;
	// 	    flex-direction: column;
	// 	    align-items: center;
	// 	}
	.title {
		width: 710rpx;
		height: 884rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.title image {
		width: 364rpx;
		height: 96rpx;
		margin-bottom: 88rpx;
	}

	.title .input1 {
		width: 600rpx;
		height: 48rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 24rpx;
		border: none;
		margin-bottom: 10rpx;
	}

	.title .input2 {
		position: relative;
		width: 600rpx;
		height: 48rpx;
		margin-top: 60rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 24rpx;
		border: none;
		margin-bottom: 50rpx;
	}

	.title .button1 {
		position: relative;
		width: 226rpx;
		height: 46rpx;
		// bottom: 10rpx;
		margin-top: 105rpx;
		margin-right: 84rpx;
		background: #CCCCCC;
		right: 0;
		position: absolute;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 50rpx;
	}

	.button2 {
		width: 610rpx;
		height: 98rpx;
		background: #CCCCCC;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 98rpx;
		margin-top: 26rpx;
	}
</style>
